import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import Tabs from '@/components/Tabs'
import { useDispatch, useSelector } from 'react-redux'
import { getAllChannels, getUserChannels } from '@/store/actions/home'
import Icon from '@/components/Icon'
import Channels from './component/Channels'
import { Drawer } from 'antd-mobile'
import ArticleList from './component/ArticleList'
import MoreAction from './component/MoreAction'

export default function Home() {
	const [open, setOpen] = useState(false)
	const [active, setActive] = useState(0)
	const dispatch = useDispatch()

	const onClose = () => {
		setOpen(false)
	}

	useEffect(() => {
		dispatch(getUserChannels())
		dispatch(getAllChannels())
	}, [dispatch])

	const tabs = useSelector((state) => state.home.userChannels)

	return (
		<div className={styles.root}>
			<Tabs index={active} tabs={tabs} onChange={(e) => setActive(e)}>
				{tabs.map((item) => (
					<ArticleList key={item.id} channelId={item.id} activeId={tabs[active].id}/>
				))}
			</Tabs>

			<div className="tabs-opration">
				<Icon type="iconbtn_search"></Icon>
				<Icon
					type="iconbtn_channel"
					onClick={() => {
						setOpen(true)
					}}
				></Icon>
			</div>

			<Drawer
				className="my-drawer"
				position="left"
				children={''}
				sidebar={
					open && (
						<Channels
							onChange={(e) => {
								setActive(e)
							}}
							onClose={onClose}
							index={active}
						/>
					)
				}
				open={open}
			></Drawer>

			<MoreAction></MoreAction>
		</div>
	)
}
